.id-box {
    .btn-commit {
        background: #097AD3;
        text-align: center;
        line-height: 45px;
        border-radius: 22px;
        width: 85%;
        height: 45px;
        margin: 25px auto;
        color: #fff;
        display: block;
        font-size: 1em;
    }
    min-height: 100vh;
    width: 100%;
    color: #ffffff;
    height: 100%;
    overflow: auto;
    //padding-top: 1px;
    .id-logo {
        width: 60%;
        margin: 0px auto;
        padding: 10% 0px;
        display: block;
    }
    .checked {
        background-color: #097ad3;
    }
    .content-id {
        padding-bottom: 20px;
        /* 新建id */
        // height: 100vh;
        &>.id-con {
            width: 95%;
            margin: 0 auto;
            padding-top: 20%;
            p {
                font-family: PingFangSC-Regular;
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                // line-height: 70px;
                letter-spacing: 0px;
                color: #ffffff;
                text-align: center;
                margin-bottom: 80px;
            }
            &>.id-btn {
                max-width: 90%;
                height: 50px;
                background-color: #ffffff;
                box-shadow: 0px 2px 21px 2px rgba(9, 122, 211, 0.5);
                border-radius: 50px;
                margin: 40px auto;
                width: 80%;
                display: flex;
                align-items: center;
                cursor: pointer;
                a {
                    display: inline-block;
                    height: 50px;
                    width: 100%;
                    align-items: center;
                    display: flex;
                    display: -webkit-box;
                    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
                    display: -moz-box;
                    /* 老版本语法: Firefox (buggy) */
                    display: -ms-flexbox;
                    /* 混合版本语法: IE 10 */
                    display: -webkit-flex;
                    /* 新版本语法: Chrome 21+ */
                }
                .icon {
                    width: 50%;
                    height: 22px;
                    background: url("../assets/images/icon1.png") no-repeat 90% center;
                    background-size: 22px auto;
                    // padding-right: 16px;
                }
                span {
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 48px;
                    letter-spacing: 0px;
                    color: #138efe;
                }
            }
            .import-id {
                .icon {
                    background: url("../assets/images/icon2.png") no-repeat 90% center;
                    background-size: 22px auto;
                }
            }
        }
        /* 新建ID 2 */
        .creatId-con {
            width: 88%;
            max-height: 500px;
            padding-bottom: 20px;
            margin: 0 auto;
            background-color: #ffffff;
            box-shadow: 0px 2px 21px 2px rgba(9, 122, 211, 0.5);
            border-radius: 16px;
            @media screen and (min-width: 780px) {
                height: 500px;
                // padding:0;
            }
            &>p {
                font-family: PingFangSC-Semibold;
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 48px;
                letter-spacing: 0px;
                color: #666666;
                text-align: center;
            }
            &>.type-id {
                width: 86%;
                margin: 0 auto;
                border-radius: 4px;
                border: solid 2px #097ad3;
                p {
                    background-color: #097ad3;
                    // border-radius: 4px 4px 0px 0px;
                    // border: solid 2px #097ad3;
                    font-family: PingFangSC-Regular;
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 48px;
                    letter-spacing: 0px;
                    color: #ffffff;
                    text-align: center;
                }
                .role {
                    display: flex;
                    display: -webkit-box;
                    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
                    display: -moz-box;
                    /* 老版本语法: Firefox (buggy) */
                    display: -ms-flexbox;
                    /* 混合版本语法: IE 10 */
                    display: -webkit-flex;
                    /* 新版本语法: Chrome 21+ */
                    padding: 20px 0;
                    dl {
                        flex: 1;
                        -webkit-box-flex: 1;
                        -moz-box-flex: 1;
                        -webkit-flex: 1;
                        -ms-flex: 1;
                        text-align: center;
                    }
                    dl dt {
                        &>div {
                            display: inline-block;
                            width: 65px;
                            height: 65px;
                            // margin-top: 25px;
                        }
                        div.geren {
                            background: url("../assets/images/icon4.png") no-repeat center;
                            background-size: 100%;
                        }
                        div.qiye {
                            background: url("../assets/images/icon3.png") no-repeat center;
                            background-size: 100%;
                        }
                    }
                    dd {
                        font-family: PingFangSC-Medium;
                        font-size: 16px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 30px;
                        letter-spacing: 0px;
                        color: #138efe;
                    }
                    .radio {
                        .radio-btn {
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            border: 1px solid #097ad3;
                        }
                        .radio-btn.active {
                            background-color: #097ad3;
                        }
                        input[name=typeId] {
                            display: none;
                        }
                    }
                }
            }
            &>.inpPwd {
                width: 60%;
                margin: 0 auto;
                padding-top: 20px;
                //color: $color-gray-dark;
                color: #999999;
                &>div {
                    display: flex;
                    display: -webkit-box;
                    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
                    display: -moz-box;
                    /* 老版本语法: Firefox (buggy) */
                    display: -ms-flexbox;
                    /* 混合版本语法: IE 10 */
                    display: -webkit-flex;
                    /* 新版本语法: Chrome 21+ */
                    align-items: center;
                    i {
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        background: url(./../assets/images/pwdicon.png) no-repeat center/100%;
                    }
                }
                div.pwd1 {
                    margin-bottom: 16px;
                }
                input {
                    width: 100%;
                    height: 30px;
                    background-color: #ffffff;
                    border-radius: 4px;
                    border-bottom: 1px solid #ccc;
                    margin-left: 20px;
                    // margin-right: 20px;
                }
            }
        }
    }
    .center-id {
        &>h3 {
            font-family: PingFangSC-Regular;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 48px;
            letter-spacing: 0px;
            color: #666666;
            padding-left: 20px;
        }
    }
}

.idList {
    border-top: 1px solid #ddd;
    .item {
        padding: 12px 5px;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
        @media screen and (min-width: 780px) {
            padding: 12px 10px;
        }
        a {
            display: inline-block;
            width: 100%;
            display: flex;
            display: -webkit-box;
            /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
            display: -moz-box;
            /* 老版本语法: Firefox (buggy) */
            display: -ms-flexbox;
            /* 混合版本语法: IE 10 */
            display: -webkit-flex;
            /* 新版本语法: Chrome 21+ */
            align-items: center;
        }
        .icon-i {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-left: 8px;
            border-radius: 50%;
            background-image: linear-gradient(-35deg, #4fabf9 0%, #0386ff 100%), linear-gradient(#0abfff, #0abfff);
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
        }
        .item-text h3 {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
        }
        .item-text p {
            // height: 24px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            // line-height: 36px;
            letter-spacing: 0px;
            color: #999999;
        }
        .item-text-title {
            font-size: 1em;
            color: #999999;
            line-height: 2em;
        }
        .item-text {
            margin-left: 10px;
            flex: 1;
            @media screen and (min-width: 780px) {
                h3 {
                    font-size: 16px;
                }
                p {
                    font-size: 14px;
                }
            }
        }
        .to-right {
            width: 8px;
            height: 12px;
            background: url(./../assets/images/right.png) no-repeat center/100% 100%;
            margin-right: 10px;
        }
    }
}